<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<head lang="en">
	<meta http-equiv="content-type" content="text/html;charset=utf-8">
	<title>Template Documentation - Dream Travel</title>
	<!-- Framework CSS -->
	<link rel="stylesheet" href="assets/blueprint-css/screen.css" type="text/css" media="screen, projection">
	<link rel="stylesheet" href="assets/blueprint-css/print.css" type="text/css" media="print">
	<!--[if lt IE 8]><link rel="stylesheet" href="assets/blueprint-css/ie.css" type="text/css" media="screen, projection"><![endif]-->
	<link rel="stylesheet" href="assets/blueprint-css/plugins/fancy-type/screen.css" type="text/css" media="screen, projection">
	<style type="text/css" media="screen">
		p, table, hr, .box { margin-bottom:25px; }
		.box p { margin-bottom:10px; }
	</style>
</head>


<body>
	<div class="container">
	
		<h3 class="center alt">&ldquo;Dream Travel&rdquo; Documentation by &ldquo;Endora&rdquo; v1.0</h3>
		
		<hr>
		
		<h1 class="center">&ldquo;Dream Travel&rdquo;</h1>
		
		<div class="borderTop">
			<div class="span-6 colborder info prepend-1">
				<p class="prepend-top">
					<strong>
					Created: 14/04/2010<br>
					By: Petar Kozjak<br>
					Email: <a href="mailto:petar@endora.hr">petar@endora.hr</a>
					</strong>
				</p>
			</div><!-- end div .span-6 -->		
	
			<div class="span-12 last">
				<p class="prepend-top append-0">Thank you for purchasing my theme. If you have any questions that are beyond the scope of this help file, please feel free to email via my user page contact form <a href="http://themeforest.net/user/endora/">here</a>. Thanks so much!</p>
			</div>
		</div><!-- end div .borderTop -->
		
		<hr>
		
		<h2 id="toc" class="alt">Table of Contents</h2>
		<ol class="alpha">
			<li><a href="#htmlStructure">HTML Structure</a></li>
			<li><a href="#cssFiles">CSS Files and Structure</a></li>
			<li><a href="#javascript">JavaScript</a></li>
			<li><a href="#psdFiles">PSD Files</a></li>
			<li><a href="#credits">Sources and Credits</a></li>
		</ol>
		
  <hr>
		
		<h3 id="htmlStructure"><strong>A) HTML Structure</strong> - <a href="#toc">top</a></h3>
		<p> Every theme had 8 different page templates:</p>
        <ul>
          <li>Home page - on this page you can put some welcome text and two news</li>
          <li>News and News Preview - Page with all news listed with pagination. Also we included how News preview should look like</li>
          <li>Static page -for some static content</li>
          <li>Gallery - two pages with image gallery and fancy lightbox and Image display page</li>
          <li>Contact - contact form and info</li>
          <li>Booking form</li>
          <li>Destination - page that displays destinations</li>
          <li>Prices - page with price list in tables</li>
        </ul>
<p>Here is example of comments begining and endingin HTML:</p>
<pre>        &lt;!--	Navigation	--&gt;<br>        	&lt;div id=&quot;Nav&quot;&gt;
			....
			&lt;/div&gt;<br>        &lt;!--	Navigation End	--&gt;</pre>
<p>Here is example of code and  structure:</p>
		
	  <p><img src="assets/images/htmlstructure.png" alt="HTML Structure" /></p>
		<p>For displaying image in text you can use &lt;ul class=&quot;Gal_1&quot;&gt; or any other gallery type (see Images.html). Master theme has 2 or 3 colums. You can remove Col2_1 and Col2_2 to display only 2 colums (see StaticPage.html). </p>
		<p>For selected items in menu please use selected class:</p>
<pre>	&lt;a href=&quot;#&quot; class=&quot;selected&quot;&gt; </pre>
<p>If you are adding more float elements don't forget to use clearFix:</p>
<pre>	&lt;div class=&quot;clear&quot;&gt;&lt;/div&gt;</pre>
<p>To replace you company logo in header use transparent PNG and name it: Logo.png</p>
<p>All code for transparent PNG can be found in page HEAD:</p>

		<pre>	&lt;!--[if IE]&gt;
		&lt;style type=&quot;text/css&quot;&gt;</pre>
		<hr>

		<h3 id="cssFiles"><strong>B) CSS Files and Structure</strong> - <a href="#toc">top</a></h3>

	  <p>You can find 3 CSS files in root. One is sytle.css (main stiles for Dream Travel), IE6_style.css for PNG fix and jquery.fancybox-1.3.1.css for fancylightbox </p>
	  <p>You can see exampe of my comments:</p>
<pre>/*	Header	*/</pre>
	  <pre>div#Hd_W {
 		height:157px;<br>		width:100%;
 	}</pre>
	  <pre>/*	Header/Hd	*/</pre>
	  <p>All images that use my class have clip rect for image cropping. You can create new class or change existing. Also you will need to update IE6_style.css for IE6.</p>
	  <pre>ul.Gal_1 li {
	position:relative;
	display:block;
	width:473px;
	height:204px;
	float:left;
	border:3px solid #FFF;
}
</pre>
		<pre>ul.Gal_1 li img {
	border:none;
	position:absolute;
	top:0;
	left:0;
	clip:rect(0px 473px 204px 0px);	
}
</pre>
	  <hr>
		
<h3 id="javascript"><strong>C) JavaScript</strong> - <a href="#toc">top</a></h3>
		
		<p>This theme imports three Javascript files.</p>
		
		<ol>
			<li>jQuery</li>
			<li>DreamTravel.js</li>
			<li>jqFancyTransitions.1.7.js (<a href="http://www.workshop.rs/">http://www.workshop.rs</a>)</li>
			<li>Fancy LightBox (<a href="http://fancybox.net/">http://fancybox.net/</a>)</li>
			<li>superfish.js (<a href="http://users.tpg.com.au/j_birch/plugins/superfish/">http://users.tpg.com.au/j_birch/plugins/superfish/</a>)</li>
		</ol>
		  
		<ol>
	    <li>jQuery is a Javascript library that greatly reduces the amount of code that you must write.
        <pre>	&lt;script type=&quot;text/javascript&quot; src=&quot;http://code.jquery.com/jquery-1.4.2.min.js&quot;&gt;&lt;/script&gt;</pre>
	    </li>
			<li>Header slider is carried by jqFanvyTransitions. You can change in DreamTravel.js for diferent effect:
            <pre> 	$('#Slideshow').jqFancyTransitions({ 
		  width: 970, 
		  height: 200, 
		  effect: 'curtain', // wave, zipper, curtain
		  strips: 5,
		  strips: 20, // number of strips
		  delay: 4000, // delay between images in ms
		  stripDelay: 30, // delay beetwen strips in ms
		  titleOpacity: 0.7, // opacity of title</pre>
            </li>
			<li>Most of the animation in this site is carried out from the fancy lightbox scripts. 
              <pre> &lt;script type=&quot;text/javascript&quot; src=&quot;./fancybox/jquery.mousewheel-3.0.2.pack.js&quot;&gt;&lt;/script&gt;<br>	&lt;script type=&quot;text/javascript&quot; src=&quot;./fancybox/jquery.fancybox-1.3.1.js&quot;&gt;&lt;/script&gt;<br>	&lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;./fancybox/jquery.fancybox-1.3.1.css&quot; 
media=&quot;screen&quot; /&gt;</pre>
			</li>
			<li>To change image apearance you can change DreamTravel.js following code:
              <pre>$(&quot;a[rel=group]&quot;).fancybox({<br>		'transitionIn'		: 'none',<br>		'transitionOut'		: 'none',<br>		'titlePosition' 	: 'over',<br>		'titleFormat'		: function(title, currentArray, currentIndex, currentOpts) {<br>return '&lt;span id=&quot;fancybox-title-over&quot;&gt;Image ' + (currentIndex + 1) + ' / ' 
+ currentArray.length + (title.length ? ' &amp;nbsp; ' + title : '') + '&lt;/span&gt;';<br>		}<br>	}); </pre>
			</li>
            <li>Drop down menu is done by superfish.js. To customizeopen DreamTravel.js and chenge folowing code:
              <pre>	jQuery('ul#Links').superfish({<br>		delay:       1000, // one second delay on mouseout <br>		pathLevels:    1,  // the number of levels of submenus that remain open or 
                           are restored using pathClass<br>     animation:   {opacity:'show',height:'show'}, // fade-in and slide-down animation 
     speed:       'normal', // faster animation speed <br>     autoArrows:  false, // disable generation of arrow mark-up <br>     dropShadows: false, // disable drop shadows <br>		disableHI:   false  // set to true to disable hoverIntent detection <br>	});</pre>
            </li>
            
		</ol>
		
<hr>
		
		<h3 id="psdFiles"><strong>D) PSD Files</strong> - <a href="#toc">top</a></h3>
		
		<p>The is one PSD file with this template.</p>
		
			<ol>
				<li>DreamTrvel.psd</li>
			</ol>
		
		<p>In PSD you can find all layers in maps. Every diferent page temaple can be found in map Content.</p>
		<p>You can check out JPG to see what pages are included</p>
<hr>
		
		<h3 id="credits"><strong>E) Sources and Credits</strong> - <a href="#toc">top</a></h3>
		
		<p>Free images are property of Petar Kozjak and are free for commercial and non-comercial use. This images display Croatian coast. They are gift to everyone who buys this themplate.
		Petar Kozjak does not take any responsibility for the way you use the photos provided on this site. Petar Kozjak is  not reponsible for any damages of any kind arising (if any) that can happen when you use or modify it.  All these photo names just for references, and this names doesn’t reflect any firm or company. If it exist then it’s just a coincidence.        <p>Free Images are folowing.
		<ul>
		  <li>Beach.jpg - Displaying Lopar beach an Island Rab</li>
		  <li>Bol_beach.jpg - Bol beach on island Brac, part of world famus Golder War beach</li>
		  <li>Croatian_sea.jpg - Croatian sea near Island Hvar</li>
		  <li>Island_Rab.jpg - Croatian Island Rab</li>
		  <li>Transfer.jpg - Fary near Island Rab</li>
      </ul>
<p>This theme has been made by Endora Team:
	  <ul>
	    <li>Design: Jasmin Halkic</li>
			<li>XHTML/CSS: Petar Kozjak</li>
			<li>Fancy LightBox (<a href="http://fancybox.net/">http://fancybox.net/</a>)</li>
			<li>jqFancyTransitions.1.7.js (<a href="http://www.workshop.rs/">http://www.workshop.rs</a>)</li>
            <li>Fancy LightBox (<a href="http://fancybox.net/">http://fancybox.net/</a>)</li>
            <li>superfish.js (<a href="http://users.tpg.com.au/j_birch/plugins/superfish/">http://users.tpg.com.au/j_birch/plugins/superfish/</a>)</li>
		</ul>
		
<hr>
		
		<p>Once again, thank you so much for purchasing this theme. As I said at the beginning, I'd be glad to help you if you have any questions relating to this theme. No guarantees, but I'll do my best to assist. If you have a more general question relating to the themes on ThemeForest, you might consider visiting the forums and asking your question in the "Item Discussion" section.</p> 
		
		<p class="append-bottom alt large"><strong>Petar Kozjak, Endora Team</strong></p>
		<p><a href="#toc">Go To Table of Contents</a></p>
		
		<hr class="space">
	</div><!-- end div .container -->
</body>
</html>